<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="stext/html; charset=gb2312" />
<title>新用户注册</title>
<script type="text/javascript">
	var xmlHttpRequest;

	function createXmlRequest() {
		if (window.ActiveXObject)//如果是IE浏览器
		{
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} else//其他浏览器
		{
			xmlHttpRequest = new XMLHttpRequest();
		}
	}

	function checkReg() {
		var username = document.getElementById("userInfo.userId").value;//取得输入框中的注册用户名
		createXmlRequest();
		xmlHttpRequest.onreadystatechange = dealCheckRegResult;

		//定义发送请求的get/post方式,url地址,是否为异步请求(ajax只能使用异步请求)
		xmlHttpRequest.open("GET", "userInfo!existsUsername.action?name="
				+ username, true);
		xmlHttpRequest.send(null);
	}

	function dealCheckRegResult() {
		if (xmlHttpRequest.readyState == 4)//请求结果已返回的状态
		{
			if (xmlHttpRequest.status == 200)//status为200,404,500等响应状态码，只有收到200表示请求处理成功的情况下才处理数据
			{
				var strResult = xmlHttpRequest.responseText;//按字符串形式接收返回结果
				//var xmlResult=xmlHttpRequest.responseXML;//如果返回是xml文档，这里可以接收为一个document对象
				document.getElementById("checkResult").innerHTML = strResult;
			}
		}
	}
</script>
<script language="javascript">
	function showMessage(id) {
		document.getElementById(id).style.display = "block";
	}
	function hideMessage(id) {
		document.getElementById(id).style.display = "none";
	}
	function showError(node, msg) {
		var parentNode = node.parentNode;
		var childNodes = parentNode.getElementsByTagName('span');
		for ( var i = 0; i < childNodes.length; i++) {
			if (childNodes[i].id == 'error') {
				childNodes[i].innerHTML = msg;

			}
		}
	}
	function checkForm() {
		if (checkUsername() && checkPassword() && checkMail()) {
			alert("检验成功");
			return true;
		}
		return false;
	}
	function checkUsername() {
		var username = document.getElementById("userInfo.userId");
		var userPattern = /^\w{6,16}$/;
		if (username.value.length == 0) {
			showError(username, '用户不能为空');
			return false;
		}
		if (!userPattern.test(username.value)) {
			showError(username, '用户名格式不正确');
			return false;
		}
		return true;
	}
	function checkPassword() {
		var password = document.getElementById("userInfo.passWord");
		var passwordPattern = /^\w{6,16}$/;
		var rpassword = document.getElementById("rpassWord");

		if (password.value.length == 0) {
			showError(password, '密码不能为空');
			return false;
		}
		if (!passwordPattern.test(password.value)) {
			showError(password, '密码格式有误');
			return false;
		}
		if (password.value != rpassword.value) {
			showError(password, '两次密码不一致');
			return false;

		}
		return true;
	}
	function checkMail() {
		var mailPattern = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
		var mail = document.getElementById("userInfo.address");
		if (!mailPattern.test(mail.value)) {
			showError(mail, "电子邮件格式不正确");
			return false;
		}
		return true;
	}
</script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/reg.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="top">
		<div class="logo">
			<img src="images/logo.gif" />
		</div>
		<div class="tmenu">
			<span><a href="index!shows.action">首页</a> </span><span>|</span> <span><a
				href="userm.jsp">用户中心</a> </span><span> |</span> <span><a
				href="reg.jsp">注册</a> </span><span>|</span> <span><a
				href="login.jsp">登录</a> </span>
		</div>
	</div>


	<div id="main">
		<form action="userInfo!reg.action" method="post"
			onsubmit="return checkForm();">
			<div class="reg">
				<h4>新用户注册</h4>
				<fieldset>
					<legend>安全信息</legend>
					<div class="row">
						<label>用户名</label> <span><input name="userInfo.userId"
							type="text" class="inp" id="userInfo.userId"
							onfocus="showMessage('div_uname_rule')"
							onblur="hideMessage('div_uname_rule')" /><input type="button"
							value="检查" onclick="checkReg()" /><span id="checkResult"></span><span
							id="error" style="color:red;margin-top:5px;"></span> </span> 正常提示 Start
						<div style="DISPLAY: none" id="div_uname_rule" class="info-pop">
							<div class="arr"></div>
							<div class="info-pop-t"></div>
							<div class="info-pop-c">
								<div class=cont>
									・6~18个字符，包括字母、数字、下划线<br />・字母开头，字母和数字结尾，不区分大小写<br />
								</div>
							</div>

							<div class="info-pop-b"></div>
						</div>
						正常提示 End
					</div>
					<div class="row">
						<label>密&nbsp;&nbsp;码</label><span> <input
							name="userInfo.passWord" type="password" class="inp"
							id="userInfo.passWord" onfocus="showMessage('div_password_rule')"
							onblur="hideMessage('div_password_rule')" /> <span id="error"
							style="color:red;margin-top:5px;"></span> </span>
						<!--正常提示 Start-->
						<div style="DISPLAY: none" id=div_password_rule class=info-pop>
							<div class=arr></div>
							<div class=info-pop-t></div>
							<div class=info-pop-c>
								<div class=cont>
									6～16个字符（字母、数字、特殊符号）,区分大小写<br />
								</div>
							</div>
							<div class=info-pop-b></div>
						</div>
						<!--正常提示 End-->
					</div>
					<div class="row">
						<label>确认密码</label><span><input name="rpassWord"
							type="password" class="inp" id="rpassWord" /> </span>
					</div>
				</fieldset>

				<fieldset>
					<legend>基本信息</legend>
					<div class="row">
						<label>真实姓名</label><span><input name="userInfo.userName"
							type="text" id="" /> </span>
					</div>
					<div class="row">
						<label>性别</label>
						<!-- <span>
<input name="userInfo.gender" type="radio"
	class="sexinp" id="sex" value="1" />女
	<input name="sex" type="radio"
	class="sexinp" id="sex" value="0" />男 </span> -->
						<span> <input name="userInfo.gender" type="radio"
							class="sexinp" id="sex" value="0" />女 <input
							name="userInfo.gender" type="radio" class="sexinp" id="sex"
							value="1" />男
							</td>
						</span>
					</div>
					<div class="row">
						<label>Email地址</label><span><input name="userInfo.address"
							type="text" class="inp" id="userInfo.address"
							onfocus="showMessage('div_mail_rule')"
							onblur="hideMessage('div_mail_rule')" value="" /> <span
							id="error" style="color:red;margin-top:5px;"></span> </span>

						<!--正常提示 Start-->
						<div style="DISPLAY: none" id="div_mail_rule" class="info-pop">
							<div class="arr"></div>
							<div class="info-pop-t"></div>
							<div class="info-pop-c">
								<div class=cont>Email的格式如：jack@163.com</div>
							</div>

							<div class="info-pop-b"></div>
						</div>
						<!--正常提示 End-->
					</div>
					<div class="row">
						<label>电话号码</label><span><input name="userInfo.telNo"
							type="text" class="inp" id="" value="" /> </span>
					</div>
					<div class="row">
						<label>密码问题</label><span><select
							name="userInfo.passQuestion" style="width:200px;height:22px;">
								<option value="你的父亲的名字？" selected="selected">你的父亲的名字？</option>
								<option value="你的母亲的名字？">你的母亲的名字？</option>
								<option value="你的女友的名字？">你的女友的名字？</option>
						</select> </span>
					</div>
					<div class="row">
						<label>问题答案</label><span><input name="userInfo.passAnswer"
							type="text" class="inp" id="" value="" /> </span>
					</div>
					<div class="row">
						<label>ID Card</label><span><input name="idcard"
							type="text" class="inp" id="idcard" /> </span>
					</div>

				</fieldset>
				<div class="row">
					<fieldset>
						<legend>用户协议</legend>
						<textarea cols="60" rows="10" readonly="readonly">请遵守中华人民共和国相关网络使用的法律条例！
不得发布、传播反动、淫秽文字、图片、影像是，违者本网站有权配合司法机关提供相关证据！</textarea>
					</fieldset>
				</div>
				<div class="row">
					<input type="submit" class="btn" value="提交信息" /> <span
						style="margin-left:50px;margin-top:10px;"> <input
						type="checkbox" value="yes" style="margin-right:10px;" />同意接受用户协议
					</span>
				</div>
			</div>
		</form>
	</div>
	<div style="clear:both"></div>
	<div id="footer">
		<div class="bmenu">
			<a href="#">免责条款</a>|<a href="#">隐私保护</a>|<a href="#">咨询热点</a>|<a
				href="#">联系我们</a>|<a href="#">公司简介</a>|<a href="#">批发方案</a>|<a
				href="#">配送方式</a>
		</div>
	</div>
</body>
</html>
